<template>
	<view class="main_box">
		<view class="fix_title">
			输入验证码
		</view>
		<view class="txt">
			验证码已发送至：+{{phone}}
		</view>
		<view class="confirm-input">
			<view @tap="focusInput(index)" class="mock-input" v-for="(item, index) in inputNumber" :key="index">
				<view class="mock-input-item">{{smsCode[index] || ''}}</view>
				<view :class="['focus', {show: focusIndex == index}]"></view>
			</view>
			<input class="input" type="number" :focus="focus" @blur="focusIndex=-1" @focus="focusInput"
				v-model="smsCode" maxlength="6" />
		</view>
		<view class="confirm bubble" v-show="off2" @click="reSend">
			<text>重新发送验证码</text>
		</view>
		<view class="resCode" v-show="!off2">
			{{count}}s后重新发送
		</view>
	</view>
</template>

<script>
	import {
		getPhoneCode,
		getTwoUserList,
		getMoneny,
		idCardOCR,
		rechargeCode,
		rechargePay,
		getTwoResult
	} from '../../common/api/blank.js';
	import {
		iiiDepositAccountSettings
	} from "@/common/api/index.js"
	import {
		_showLoading,
		_showToast
	} from '../../common/js/util.js';
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
				smsCode: '',
				inputNumber: [1, 2, 3, 4, 5, 6],
				focusIndex: -1,
				focus: true,
				count: '',
				timer: null,
				price: "",
				phone: "",
				off2: true,
				batId: "",
				msgMerTranNo: "",
				orgId: "",
				qy: ""
			}
		},
		onLoad(option) {
			this.orgId = option.orgId
			this.phone = option.phone
			this.price = option.price
			this.batId = option.batId
			this.qy = option.qy
			this.msgMerTranNo = option.msgMerTranNo
			this.sendCodeAstrict()
		},
		computed: {
			...mapState('redPacket', ["isOpend"])
		},
		watch: {
			smsCode: {
				async handler(newName, oldName) {
					if (newName.length == 6) {
						uni.showLoading({
							title: '充值中'
						})
						try {
							const result = await rechargePay({
								batId: this.batId,
								amount: this.price,
								mobileCode: this.smsCode,
								msgMerTranNo: this.msgMerTranNo,
								orgId: this.orgId
							})
							console.log(result)
							if (result.code === 0) {
								if (result.data.responseStatus === 'F') {
									this.smsCode = ""
									uni.hideLoading()
									_showToast(result.data.responseMsg)
									uni.navigateBack({
										delta: 2
									})
								}
								if (result.data.responseStatus === 'S') {
									uni.hideLoading()
									iiiDepositAccountSettings({
										batId: this.batId
									})
									if(this.qy){
										uni.navigateTo({
											url: `/pageBlank/bindStudent/bindStudent?batId=${this.batId}&orgId=${this.orgId}&phone=${this.phone}&toDownload=1`//"/pageMassage/blankDownLoadApp/blankDownLoadApp"
										})
									}else {
										uni.redirectTo({
											url: '/pageBlank/index/index'
										})
									}
								}
								if (result.data.responseStatus === 'P') {
									//这里处理很绕，小心点
									var a = false;
									var b = 0;
									var failOff = 0;
									(function f(i) {
										if (++i < 4) {
											setTimeout(async function() {
												b = b + 1
												const obj =
													await getTwoResult({
														batId: this
															.batId,
														msgMerTranNo: this
															.msgMerTranNo,
														orgId: this
															.orgId
													})
												if (obj.code ===
													0
												) { //查询code为0

													if (obj
														.data
														.responseStatus ===
														'S'
													) {
														a = true
														failOff
															=
															1
													}
													if (obj
														.data
														.responseStatus ===
														'F'
													) {
														a = true
														failOff
															=
															2
													}
													if (b ===
														3
													) { //查询三次都为'P'
														this.smsCode =
															""
														uni.hideLoading()
														_showToast
															(
																"查询超时"
															)
														uni.navigateBack({
															delta: 2
														})
													}

												} else { //查询三次code为500
													if (b ===
														3) {
														this.inps
															.forEach(
																(item,
																	index
																) => {
																	this.$set(this
																		.inps,
																		index,
																		""
																	)
																}
															)
														uni.hideLoading()
														_showToast
															(
																"查询错误"
															)
														uni.navigateBack({
															delta: 2
														})
													}

												}
												if (a) { //根据上次结果判断是否开启下一次定时器
													if (failOff ===
														1
													) { //成功状态且为'S'
														uni.hideLoading()
														iiiDepositAccountSettings({
															batId: this.batId
														})
														
														if(this.qy){
															uni.navigateTo({
																url: `/pageBlank/bindStudent/bindStudent?batId=${this.batId}&orgId=${this.orgId}&phone=${this.phone}&toDownload=1`//"/pageMassage/blankDownLoadApp/blankDownLoadApp"
															})
														}else {
															uni.redirectTo({
																url: '/pageBlank/index/index'
															})
														}
													}
													if (failOff ===
														2
													) { //成功状态但为'F'
														this.smsCode =
															""
														uni.hideLoading()
														_showToast
															(obj.data
																.responseMsg
															)
														uni.navigateBack({
															delta: 2
														})
													}
													return //跳出循环
												}
												f(i) //函数自调用
											}, 1000 * i);
										}
									})(0);
								}
							} else {
								this.smsCode = ""
								uni.hideLoading()
								_showToast(result.msg)
								uni.navigateBack({
									delta: 2
								})
							}
						} catch (err) {
							uni.hideLoading()
							_showToast(err)
							uni.navigateBack({
								delta: 2
							})
						}

					}
					this.focusIndex = this.smsCode.length
				},
				immediate: true,
				deep: true
			}
		},
		onBackPress(options) {
			if (options.from === 'navigateBack') {
				return false
			}
			this.back();
			return true
		},
		components: {

		},
		methods: {
			focusInput(index) {
				this.focus = true
				this.focusIndex = this.smsCode.length
			},
			async reSend() {
				uni.showLoading({
					title: '短信发送中'
				})
				try {
					const res = await rechargeCode({
						batId: this.batId,
						amount: this.price,
						orgId: this.orgId
					})
					if (res.code === 0) {
						uni.hideLoading()
						if (res.data.responseStatus === 'S') {
							this.msgMerTranNo = res.data.msgMerTranNo
							_showToast("短信发送成功")
						}
						if (res.data.responseStatus === 'F') {
							_showToast(res.data.responseMsg)
						}
					} else {
						uni.hideLoading()
						_showToast(res.msg)
					}

				} catch (err) {
					uni.hideLoading()
					_showToast(err)
				}

			},
			sendCodeAstrict() {
				this.off2 = false
				const TIME_COUNT = 60;
				if (!this.timer) {
					this.count = TIME_COUNT;
					this.timer = setInterval(() => {
						if (this.count > 0 && this.count <= TIME_COUNT) {
							this.count--;
						} else {
							this.off2 = true
							clearInterval(this.timer);
							this.timer = null;
						}
					}, 1000)
				}
			},
			back() {
				var pages = getCurrentPages();
				uni.navigateBack()
			},
		}
	}
</script>

<style lang="scss" scoped>
	/* 按钮 */
	.confirm {
		margin-top: 40rpx;
		width: 325rpx;
		height: 80rpx;
		background: #07c160;
		border-radius: 6rpx;
		font-size: 30rpx;
		color: #fff;
		line-height: 80rpx;
		text-align: center;

	}

	.bubble {
		position: relative;
		overflow: hidden;
	}

	.bubble:after {
		content: "44444";
		background: #5c9899;
		position: absolute;
		width: 750rpx;
		height: 750rpx;
		left: calc(50% - 375rpx);
		top: calc(50% - 375rpx);
		opacity: 0;
		margin: auto;
		border-radius: 50%;
		transform: scale(1);
		transition: all 0.5s ease-in-out;
	}

	.bubble:active:after {
		transform: scale(0);
		opacity: 1;
		transition: 0s;
	}

	page {
		height: 100%;
		width: 100%;
	}

	page-body {
		height: 100%;
		width: 100%;
	}

	@keyframes blink {
		0% {
			opacity: 1;
		}

		100% {
			opacity: 0;
		}
	}

	.confirm-input {
		position: relative;
		width: 100%;
		display: flex;
		justify-content: center;
		overflow: hidden;

		.mock-input {
			position: relative;
			display: inline-block;
			width: 92rpx;
			height: 96rpx;
			line-height: 96rpx;
			border: 2rpx solid #F2F2F2;
			border-radius: 12rpx;
			text-align: center;
			font-size: 48rpx;
			color: #757575;

			+.mock-input {
				margin-left: 18rpx;
			}

			&-item {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
			}

			.show {
				display: block;
				position: absolute;
				left: 20rpx;
				top: calc(50% - 29rpx);
				width: 4rpx;
				height: 58rpx;
				background: #3478F5;
				border-radius: 2rpx;
				animation: blink 1s linear infinite;
			}
		}

		.input {
			position: absolute;
			left: -100vw;
			top: 0;
			width: 400vw;
			height: 100%;
			opacity: 0;
		}
	}

	.kao {
		input {
			width: 0rpx;
			height: 0rpx;
		}
	}

	.main_box {
		padding: 24upx;
		box-sizing: border-box;
		overflow-y: auto;

		.resCode {
			margin-top: 40rpx;
			width: 325rpx;
			height: 80rpx;
			background: #e6e6e6;
			border-radius: 6rpx;
			font-size: 30rpx;
			color: #6a6a6a;
			line-height: 80rpx;
			text-align: center;
		}

		.inp {
			display: flex;
			margin-left: 10rpx;

			.codesp {
				width: 92rpx;
				height: 96rpx;
				line-height: 96rpx;
				text-align: center;
				background: #FFFFFF;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				opacity: 1;
				border: 2rpx solid #ACACAC;
				margin-right: 22rpx;
				text-align: center;
			}

			.codesp:last-child {
				line-height: 96rpx;
				text-align: center;
				width: 92rpx;
				height: 96rpx;
				background: #FFFFFF;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				opacity: 1;
				border: 2rpx solid #ACACAC;
				margin-right: 0rpx;
				text-align: center;
			}
		}

		.fix_title {
			margin: 30upx 0 60upx 0;
			font-size: 40upx;
			font-weight: bolder;
			display: flex;
			align-items: center;
			margin-left: 10rpx;

			&::before {
				content: '';
				height: 36upx;
				width: 12upx;
				background-image: linear-gradient(to bottom, #c3defc, #007AFF);
				margin-right: 12upx;
				border-radius: 6upx;
			}
		}

		.txt {
			height: 46rpx;
			font-size: 32rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #020202;
			line-height: 46rpx;
			margin-bottom: 68rpx;
			margin-left: 32rpx;
			margin-top: 56rpx;

		}

	}
</style>